<template>
  <div class="container" @click="routeTo">
    <div class="left-content">
      <div class="content-title">
        <p>{{ textInfo.title }}</p>
      </div>
      <div class="content-footer">
        <div class="content-footer-left">
          <div class="content-footer-date">{{ textInfo.date }}·</div>
          <div class="content-footer-tag">
            {{ textInfo.tag }}
            <!-- <van-tag type="warning" v-if="textInfo.tag === 'PC游戏'"></van-tag>
            <van-tag type="primary" v-else-if="textInfo.tag === '主机游戏'" color="#969799">主机游戏</van-tag>-->
          </div>
        </div>
        <div class="content-footer-right">
          <div>
            <van-icon name="comment" />
            <span style="margin-left: 5px;">{{ textInfo.comment }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="right-img">
      <van-image width="130" height="69.33" :src="textInfo.imgUrl" radius="3px" lazy-load />
    </div>
  </div>
</template>

<script setup>
import router from '../../route/index';
import { defineProps } from "vue"

// 父组件传值
let props = defineProps({
  textInfo: Object
})

// 点击跳转到文章详情
const routeTo = () => {
  router.push({
    path: '/artdetail',
    query: {
      id: props.textInfo.id
    }
  })
}

</script>

<style scoped>
.container {
  height: 80px;
  border-bottom: 1px solid #f2f3f5;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 15px;
  line-height: 21px;
  color: #323233;
  background-color: #fff;
}

.left-content {
  height: 100%;
  width: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.content-title p {
  margin: 0;
  color: #323233;
  height: 34px;
}

.content-footer {
  width: 100%;
  font-size: 12px;
  line-height: 16px;
  color: #c8c9cc;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.content-footer-left {
  display: flex;
  align-items: center;
}

.right-img {
  margin-left: 10px;
}
</style>
